<template>
  <section id="container" style="height: 320px;line-height: normal;"></section>
</template>
<script>

  export default {
    name: 'mapView',
    props: {
      rangMap: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        map: null
      }
    },
    methods: {
      /*地图相关s*/
      iniMap(data) { // 初始化地图
        const center = [data.longitude, data.latitude]
        this.map = new AMap.Map('container', {
          center,
          zoom: 12
        })
        this.polygon() // 初始化地图坐标
        if (this.rangMap.some(item => item.isSystemGenerate)) this.creatStoreCircle(center)
      },
      polygon() { // 初始化矢量地图范围
        console.log(this.rangMap)
        this.rangMap.map((x1) => {
          console.log(x1.coordinatesArr)
          x1.coordinatesArr.length > 0 && x1.coordinatesArr.forEach((x2) => {
            console.log('x2', x2, this.$utils.getPointsCenter(x2))
            this.addCenterMark(this.$utils.getPointsCenter(x2), x1.color, x1.name) // 设置文案
            this.map.add(new AMap.Polygon({
              map: this.map,
              path: x2,
              strokeColor: '#FF33FF',
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: x1.color,
              zIndex: 50,
              bubble: true // 事件冒泡到地图上
            }))
          })
        })
      },
      creatStoreCircle(center) { // 绘制圆
        let e = this.rangMap.find((x) => x.isSystemGenerate)
        const circle = new AMap.Circle({
          center,
          radius: 5000, //半径
          borderWeight: 3,
          strokeColor: e.color,
          strokeWeight: 6,
          strokeOpacity: 0.1,
          fillOpacity: 0.2,
          strokeStyle: 'solid',
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: '#1791fc',
          zIndex: 0,
          extData: {
            type: 'circle'
          }
        })

        this.map.add(circle)
        const text = new AMap.Text({
          text: e.name,
          anchor: 'center', // 设置文本标记锚点
          style: {
            'padding': '5px 5px',
            'background-color': '#188ffd',
            'border-width': '2px',
            'text-align': 'center',
            'font-size': '16px',
            'color': '#ffffff',
            'border-color': 'rgba(0,0,0,.1)',
            'border-style': 'solid',
            'max-width': '300px',
            'opacity': 1
          },
          position: center,
          extData: {
            type: 'circle'
          }
        })
        text.setMap(this.map)
        let iconMark = new AMap.Marker({
          position: center,
          anchor: 'center',
          size: new AMap.Size(30, 30),
          icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
          offset: new AMap.Pixel(5, -30)
        })
        this.map.add(iconMark)
      },
      addCenterMark(center, backgroundColor, text) { // 添加中心覆盖物
        let textMark = new AMap.Text({
          text,
          anchor: 'center', // 设置文本标记锚点
          style: {
            'padding': '5px 5px',
            'background-color': backgroundColor,
            'border-width': '2px',
            'text-align': 'center',
            'font-size': '14px',
            'color': '#ffffff',
            'border-color': 'rgba(0,0,0,.1)',
            'border-style': 'solid',
            'max-width': '300px'
          },
          position: center
        })
        textMark.setMap(this.map)
      }
    }
  }
</script>
<style lang="less" scoped>

</style>
